<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>${siteName!""}${title!""}</title>
    <#include "../common/header.ftl"/>
    <style>
        td{
            vertical-align:middle;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <div class="lyear-layout-sidebar-scroll">
                <#include "../common/left-menu.ftl"/>
            </div>

        </aside>
        <!--End 左侧导航-->

        <#include "../common/header-menu.ftl"/>

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid" >

                <div class="row" >
                    <div class="col-lg-12">
                    <div class="card" id="main" style="height: 400px;width: 600px;">
                    </div>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<#include "../common/footer.ftl"/>
<script type="text/javascript" src="/admin/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/admin/js/main.min.js"></script>
<script src="/admin/js/echarts.min.js"></script>
<script src="/admin/js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    //AJAX接收数据主体
    $(document).ready(function () {
        $.get("/quantity/studentCount",function(result){

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '学生借书统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['借阅次数']
                },
                xAxis: {
                    //结合
                    data: result.data[0].studentName
                },
                yAxis: {},
                series: [{
                    name: '借阅次数',
                    type: 'bar',
                    //结合
                    data: result.data[0].studentCount
                }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },'json');

    });

</script>
</body>
</html>
